<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script type="text/javascript">
	$(document).ready(function() {
		// 아이디 입력하는 text 입력폼에 포커스가 이동하면 비워줌.
		// 포커스가 벗어나는데, 아무것도 입력하지 않은 경우에는 아이디라는 글자를 value로 설정.
		if($("input[name=id]").val()==""){
			$("input[name=id]").val("아이디");
		}
		if($("input[name=password]").val()==""){
			$("input[name=password]").attr({
				type:"text"
			});
			$("input[name=password]").val("비밀번호");
		}
		$("input[name=id]").focus(function(){
			$(this).val("");
		}).focusout(function(){
			if($(this).val()==""){
				$(this).val("아이디");
			}
		});
		// 비밀번호 입력하는 text 입력폼에 포커스가 이동하면 비워줌.
		// 포커스가 벗어나는데, 아무것도 입력하지 않은 경우에는 value를 비워줌.
		$("input[name=password]").focus(function(){
			$(this).val("");
			$(this).attr({
				type:"password"
			});
		}).focusout(function(){
			if($(this).val()==""){
				$(this).attr({
					type:"text"
				});
				$(this).val("비밀번호");
			}
		});
		$("img[name=loginBtn]").click(function(){
			if ($("input[name=id]").val() =="아이디") {
				alert("아이디를 입력하세요");
				return false;
			}else if ($("input[name=password]").val() == "비밀번호") {
				alert("패스워드를 입력하세요");
				return false;
			}else{
			$("form[name=loginform]").submit();
			}
		});
		$("img[name=logout]").click(function(){
			$("form[name=logoutForm]").submit();
		});

	});//ready
</script>
<font size="2"><a href="findIdPage.do">아이디</a>/
<a href="findPasswordPage.do">패스워드</a> 찾기
</font>


<br><br>
<c:choose>
	<c:when test="${sessionScope.mvo==null}">
		<div id="loginContainer">
			<form name="loginform" method="post" action="login.do">
			<div>

				<div class="input">
				<input type="text" name="id" size="18"><br>	
				<input type="password" name="password" size="18">
				<input type="hidden" name="path" value="main.do">
				</div>
				<div class="submit">
				<a href="#"><img src="img/btn_login_m.png"  name="loginBtn"></a>
				</div>
			</div>
			<div>
				
			</div>
				 
				 
			</form>
		</div>
	</c:when>
	<c:otherwise>
		<form action="logout.do" name="logoutForm" method="post">
			${sessionScope.mvo.name } 님<br> 
			 로그인 하였습니다. <a href="#"><img src="img/btn-logout.gif" align="right" name="logout"></a>
		</form>
	</c:otherwise>
</c:choose>
<br><br><br><br>
<body>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=47113cf6b7484694bf0f013f39b71aec"></script>
<div id="map" style="border:1px solid #000;"></div>
<script type="text/javascript">
		var oSeoulCityPoint = new nhn.api.map.LatLng(37.5675451, 126.9773356);
		var defaultLevel = 11;
		var oMap = new nhn.api.map.Map(document.getElementById('map'), { 
						point : oSeoulCityPoint,
						zoom : 4,
						enableWheelZoom : true,
						enableDragPan : true,
						enableDblClickZoom : false,
						mapMode : 0,
						activateTrafficMap : false,
						activateBicycleMap : false,
						minMaxLevel : [ 1, 14 ],
						size : new nhn.api.map.Size(180, 300)		});
		var oSlider = new nhn.api.map.ZoomControl();
		oMap.addControl(oSlider);
		oSlider.setPosition({
			top : 2,
			left : 2
		});

		var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
		oMap.addControl(oMapTypeBtn);
		oMapTypeBtn.setPosition({
			bottom : 10,
			right : 80
		});
		
		var oThemeMapBtn = new nhn.api.map.ThemeMapBtn();
		oThemeMapBtn.setPosition({
			bottom : 10,
			right : 10
		});
		oMap.addControl(oThemeMapBtn);

		var oSize = new nhn.api.map.Size(28, 37);
		var oOffset = new nhn.api.map.Size(14, 37);
		var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);

		var oInfoWnd = new nhn.api.map.InfoWindow();
		oInfoWnd.setVisible(false);
		oMap.addOverlay(oInfoWnd);

		oInfoWnd.setPosition({
			top : 20,
			left :20
		});

		oInfoWnd.attach('changeVisible', function(oCustomEvent) {
			if (oCustomEvent.visible) {
				oLabel.setVisible(false);
			}
		});
		
		var oPolyline = new nhn.api.map.Polyline([], {
			strokeColor : '#f00', // - 선의 색깔
			strokeWidth : 5, // - 선의 두께
			strokeOpacity : 0.5 // - 선의 투명도
		}); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
		oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.

		oMap.attach('mouseenter', function(oCustomEvent) {

			var oTarget = oCustomEvent.target;
			// 마커위에 마우스 올라간거면
			if (oTarget instanceof nhn.api.map.Marker) {
				var oMarker = oTarget;
				oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
			}
		});

		oMap.attach('mouseleave', function(oCustomEvent) {

			var oTarget = oCustomEvent.target;
			// 마커위에서 마우스 나간거면
			if (oTarget instanceof nhn.api.map.Marker) {
				oLabel.setVisible(false);
			}
		});


	</script>
	<br>
	<br>
</body>

</html>
